<template>
	<view class="page">
		<u-toast ref="uToast" />
		<view class="top-bg">
			<u-navbar :is-back="true" title=" " :border-bottom="false" :custom-back="customBack">
				<view class="top-tool">
					<view class="item" @click="model='exam'" :class="model=='exam'?'item-active':''"
						style="border-right: none;border-radius: 25rpx 0 0 25rpx;">
						答题
					</view>
					<view class="item" @click="model='look'" :class="model=='look'?'item-active':''"
						style="border-left: none;border-radius:0 25rpx 25rpx 0">
						解析
					</view>
				</view>
			</u-navbar>
			<view class="top-info">
				<view class="chapter-name u-line-1">
					{{title}}
				</view>
				<view class="count" @click="answerCardHide= !answerCardHide">
					<u-icon name="grid" size="32" style="margin-right: 10rpx;"></u-icon>
					{{currentIndex+1}}/{{list.length}}
				</view>
			</view>
		</view>
		<view class="swiper-box" :style="{ top: 93 + statusBarHeight + 'px' }">
			<pw-swiper ref="swiper" :list="list" :getPreviousHandler="gph" :getNextHandler="gnh"
				:dataIndex="currentIndex" @change="change">
				<template v-slot:default="{item,index}">
					<view class="question">
						<view class="tool-tip">
							<view class="type">
								({{item.type|category}})
							</view>
						</view>
						<view class="title">
							<mp-html :content="item.title"></mp-html>
						</view>


						<!-- 单选 -->
						<view class="accessories" v-if="item.type=='1'||item.type=='3'">
							<view class="item" @click="chosed(a_index,a_item.isRight,item,item.type)"
								v-for="(a_item,a_index) in item.answerList" :key="a_index">
								<view class="icon" :class="{'choice':a_index==answercard[item._id].a}">
									{{a_index|letter}}
								</view>
								<view class="text">
									<mp-html :content="a_item.content"></mp-html>
								</view>
							</view>
						</view>

						<!-- 多选 -->
						<view class="accessories" v-if="item.type=='2'">
							<view class="item" @click="chosed(a_index,a_item.isRight,item,item.type)"
								v-for="(a_item,a_index) in item.answerList" :key="a_index">
								<view class="icon"
									:class="{'choice':answercard[item._id].a&&answercard[item._id].a.indexOf(a_index)!=-1}">
									{{a_index|letter}}
								</view>
								<view class="text">
									<mp-html :content="a_item.content"></mp-html>
								</view>
							</view>
						</view>
						<!-- 无需作答 -->
						<view class="accessories" v-if="item.type=='4'||item.type=='5'">
							<view class="item" style="justify-content: center;">
								<view class="text" style="color: #3c7cfc;">
									本题不支持作答，请自行核对答案并查看解析
								</view>
							</view>
						</view>
						<view class="analysis" v-if="model=='look'">
							<u-section title="答 案 解 析" :font-size="30" :right="false" :line-color="'#005CFF'"
								:color="'#313133'"></u-section>
							<view class="content">
								<mp-html :content="item.analysis"></mp-html>
							</view>
							<!-- 选项解析 -->
							<view class="accessories">
								<view class="item" v-for="(a_item,a_index) in item.answerList" :key="a_index"
									v-if="a_item.analysis!=''">
									<view class="text">
										{{a_item.analysis}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
			</pw-swiper>
		</view>
		<!-- 答题卡 -->
		<view class="answer-card" :class="answerCardHide?'answer-card-hide':''">
			<view class="item-box">
				<view class="item"
					:class="{'choice':model=='exam'&&answercard[item._id].r!=0,'no':model=='look'&&answercard[item._id].r==2,'yes':model=='look'&&answercard[item._id].r==1}"
					@click="currentIndex=index;answerCardHide=true" v-for="(item,index) in list">{{index+1}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let that
	let systemInfo = uni.getSystemInfoSync()
	import pwSwiper from "../../components/pw-swiper/pw-swiper"
	export default {
		components: { pwSwiper },
		data() {
			return {
				cid: null,
				bank_id: null,
				title: null,
				statusBarHeight: systemInfo.statusBarHeight,
				list: [],
				currentIndex: 0,
				model: 'exam',
				answerCardHide: true,
				answercard: {}, //留有最新结果的答题版
				answercardNew: {}, //本次答的题目，用于统计
				hasSubmit: false
			};
		},
		onLoad(options) {
			that = this
			this.cid = options.cid
			this.bank_id = options.bank_id
			this.title = options.title
			this.getQuestions()
		},
		onUnload() {
			//页面卸载时提交答题情况
			if (!this.hasSubmit)
				this.saveAnswercard()
		},
		filters: {
			letter(val) {
				const arr = ['A', "B", "C", "D", "E", "F", "G", "H", "I", "G", "K", "L", "M", "N", "O", "P", "Q", "R", "S",
					"T",
					"U", "V", 'W', "X", "Y", "Z"
				]
				return arr[val]
			},
			category(val) {
				const catType = {
					'1': "单选",
					'2': "多选",
					'3': "判断",
					'4': "问答",
					'5': "填空"
				}
				return catType[val]
			}
		},
		methods: {
			customBack() {
				uni.showLoading({
					title: "保存中..."
				})
				//提交并返回
				this.saveAnswercard().then(v => {
					this.hasSubmit = true
					uni.hideLoading()
					uni.navigateBack({
						delta: 1
					})
				})
			},
			//提交答题情况
			saveAnswercard() {
				return uni.vk.callFunction({
					url: 'client/q_bank/kh/save_answer',
					data: {
						bank_id: this.bank_id,
						chapter_id: this.cid,
						answercard: this.answercard,
						answercardNew: this.answercardNew
					},
				})
			},
			//获取题目
			getQuestions() {
				uni.showLoading({
					title: "准备中..."
				})
				uni.vk.callFunction({
					url: 'client/q_bank/kh/get_questions_by_chapter',
					data: {
						bank_id: this.bank_id,
						cid: this.cid
					},
					success(data) {
						that.list = data.questions.rows
						//处理答题版
						let temp = {}
						data.questions.rows.forEach(v => {
							//取出历史答题卡 把历史内容更新到最新答题卡上
							if (data.answercard != null && data.answercard.answercard[v._id] != null) {
								temp[v._id] = data.answercard.answercard[v._id]
							} else {
								temp[v._id] = {
									a: null, //答题结果
									r: 0, //答题状态 0 未答 1 对 2 错
								}
							}

						})

						//展示
						that.answercard = temp
						uni.hideLoading()
					},
					fail(e) {
						that.$refs.uToast.show({
							title: e.msg
						})
					}
				});
			},
			chosed(s, isRight, question, type) {
				let res = this.answercard[question._id]
				//选项下标 题目下标  题目类型
				if (type == 2) {
					//多选
					if (res.a == null) {
						//第一次选择
						res.a = [s]
					} else {
						//判断是选中还是取消
						const find_index = res.a.indexOf(s)
						if (find_index > -1) {
							res.a.splice(find_index, 1)
						} else {
							res.a.push(s)
						}
					}
					//判断答案是否正确
					let my_choice = res.a.sort(function(a, b) {
						return a - b
					}).join(',')

					//取标准答案
					let answerArr = []
					question.answerList.forEach((item, index) => {
						if (item.isRight)
							answerArr.push(index)
					});
					let answer_str = answerArr.sort(function(a, b) {
						return a - b
					}).join(',')

					res.r = my_choice == answer_str ? 1 : 2

				} else if (type == 1 || type == 3) {
					//单选 判断
					res = {
						a: s,
						r: isRight ? 1 : 2,
					}
				}

				//更新答题版
				this.$set(this.answercard, question._id, res)
				//追加做题记录
				this.answercardNew[question._id] = res
			},
			gph() {},
			gnh() {},
			change(e) {
				this.currentIndex = e
			},
		}
	}
</script>

<style lang="scss" scoped>
	page,
	.page {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.swiper-box {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
	}

	.body {
		width: 100%;
		height: 100%;
		// background: #007AFF;
	}

	.top-bg {
		position: fixed;
		background: #FFFFFF;
		top: 0;
		left: 0;
		width: 750rpx;
		z-index: 10;
		box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.05);

		.top-tool {
			position: relative;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50rpx;
			/* #ifdef MP */
			padding-left: 112rpx;
			/* #endif */
			/* #ifndef MP */
			padding-right: 36rpx;
			/* #endif */

			.item {
				/* #ifdef MP */
				width: 33%;
				/* #endif */
				/* #ifndef MP */
				width: 25%;
				/* #endif */
				height: 100%;
				line-height: 50rpx;
				border: 1rpx solid #efefef;
				text-align: center;
				letter-spacing: 4rpx;
			}

			.item-active {
				color: #FFFFFF;
				// font-weight: bold;
				background-color: rgba($color: #005CFF, $alpha: 0.9);
				border: 1rpx solid rgba($color: #005CFF, $alpha: 0.9);
			}
		}
	}

	.top-info {
		width: 100%;
		height: 90rpx;
		border-top: 1rpx solid #ECECEC;
		border-bottom: 1rpx solid #ECECEC;
		background: #FFFFFF;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.chapter-name {
			width: 580rpx;
			overflow: hidden;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 600;
			color: #333333;
			letter-spacing: 1rpx;
		}

		.count {
			width: 120rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}

	.question {
		padding: 20rpx;
		background: #FFFFFF;

		.tool-tip {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 44rpx;

			.type {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #005CFF;
				line-height: 44rpx;
				margin-bottom: 10rpx;
				letter-spacing: 2rpx;
			}
		}


		.title {
			font-size: 30rpx !important;
			font-weight: 500 !important;
			color: #333333;
			text-align: justify !important;
		}

		.accessories {
			background: #FFFFFF;
			margin-top: 10rpx;

			.item {
				width: 100%;
				height: 100rpx;
				border-bottom: 1rpx dashed #ECECEC;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 0 20rpx;

				.icon {
					width: 46rpx;
					height: 46rpx;
					line-height: 46rpx;
					margin-right: 20rpx;
					border-radius: 23rpx;
					color: #afafaf;
					border: 2rpx solid #afafaf;
					text-align: center;
				}

				.text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
				}
			}
		}
	}

	.answer-card {
		position: fixed;
		left: 0;
		bottom: 0;
		height: 60vh;
		width: 750rpx;
		z-index: 20;
		background: #FFFFFF;
		margin-top: 20rpx;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
		border-radius: 30rpx 30rpx 0 0;
		transition: height 0.4s ease;
		padding: 20rpx 40rpx;
		overflow-y: scroll;

		.item-box {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;

			.item {
				width: 65rpx;
				height: 65rpx;
				line-height: 65rpx;
				margin: 15rpx;
				border-radius: 50%;
				color: #afafaf;
				border: 2rpx solid #afafaf;
				text-align: center;
			}
		}

	}

	.no {
		color: #FFFFFF !important;
		background: #FF6944 !important;
		border: 2rpx solid #FF5C31 !important;
	}

	.yes {
		color: #FFFFFF !important;
		background: #4AD746 !important;
		border: 2rpx solid #00DC1C !important;
	}

	.choice {
		color: #FFFFFF !important;
		background: #005CFF !important;
		border: 2rpx solid #005CFF !important;
	}

	.analysis {
		background: #FFFFFF;
		margin-top: 20rpx;
		padding: 20rpx;

		.content {
			margin-top: 20rpx;
			font-size: 30rpx !important;
			font-weight: 500 !important;
			color: #333333;
			text-align: justify !important;
		}
	}

	.answer-card-hide {
		height: 0rpx !important;
		bottom: -60rpx;
	}
</style>
